<template>
    <div>
        <van-nav-bar title="标题"/>
        <van-cell-group>
            <van-field v-model="value" label="标题" placeholder="请输入标题" />
           
        </van-cell-group>
        <div class="listtext">
            <van-field v-model="message" rows="1" autosize label="发布内容" type="textarea" placeholder="请输入发布内容" />
            <van-uploader v-model="fileList" :max-count="3" :after-read="afterRead" />

        </div>
        <van-button round type="info" color="rgba(87, 198, 23, 0.682)" @click="change" size="large">发布</van-button>
         <tabars></tabars>
    </div>
    
</template>

<script>
import { Field } from 'vant';
import { getLine } from '@/api/home';
import tabars from '@/components/bottom'
export default {
    data() {
        return {
            message: '',
            value: '',
            fileList: [],
            imgSrc: []
        };
    },
    components: {
        [Field.name]: Field,
        [tabars.name]:tabars
    },
    methods: {
        change() {
// this.axios({
//     url:'/api/add_article',
//     method:'post',
//     data:{
//         title:this.value,
//         content:this.message,
//         cate_name:'今日头条',
//         cate_id:'610128169b33ed00018ed5df',
//         author:'你好世界',
//         author_id:'62cfcc94c98815000108d71b',
//         imageSrc:this.imgSrc

//     }
// })
    getLine('/api/add_article',{
        title:this.value,
        content:this.message,
        cate_name:'今日头条',
        cate_id:'610128169b33ed00018ed5df',
        author:this.$store.state.vuexname,
        author_id:localStorage.getItem('dw-uid'),
        imageSrc:this.imgSrc

    }).then(res=>{
        console.log('发送成功')
        this.value=''
this.message=''

console.log('这是标题',this.value,'这是内容',this.message)
        console.log(res)
    })    },
        async afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file);
            let { type } = file.file;
            //  拿到类型  比如jpg
            type = type.split("/")[1];
            console.log(type);
            let file_name = `${new Date().getTime()}_${Math.random()
                .toString(36)
                .slice(2)}.${type}`;
            // console.log(file_name);
            // 去自己的服务器拿到上传七牛云需要的 token  为何放在服务端呢?  主要是为了安全，因为里边包含了一些账号信息
            let token = null;
            await this.$http.post(
                "https://d33a5037-6c63-4e92-8bb1-30018ab701ea.bspapp.com/http" +
                "/upload/token"
            ).then(res => {
                console.log(res);
                token = res.data.token

            }).catch(err => {
                console.log(err);
            })
            // // new一个form data   并且把文件 token  和文件的名字放进去  file token key是固定的 不能改
            const formdata = new FormData();
            formdata.append("file", file.file);
            formdata.append("token", token);
            formdata.append("key", file_name);
            console.log(token);
            // https://upload-z1.qiniup.com 是上传到七牛的真正接口  其中z1是华北区域

            let result = await this.$http.post(
                "https://upload-z1.qiniup.com",
                formdata
            )
            console.log(result);

            let avatar = `http://toutiao.longxiaokj.com/` + result.data.keyx
            this.imgSrc.push(avatar)
            this.$forceUpdate()
            //  给对象动态的添加属性 并不会触发自动更新
            console.log(`http://toutiao.longxiaokj.com/` + result.data.key);
            // `http://toutiao.longxiaokj.com/` + result.key  这个地址就是传到服务器的地址
            // 发布文章时 imageSrc  字段需要的就是这个

        },

    },
};
</script>

<style lang="less" scoped>
</style>